<template>
	<pro-table
		ref="protable"
		rowKey="deviceTypeId"
		:loadDataUrl="api.getList"
		:columns="columns"
		:isAdd="$_has('sys:deviceType:insert')"
		:isDelete="$_has('sys:deviceType:delete')"
		:isHideOrgName="false"
		:orgId="globalOrgId"
		:extendParam="{
			orgId: globalOrgId,
		}"
		:showPagination="false"
		@selectedRowChange="onSelectChange"
		@addRecord="addRecord"
		@showDeleteConfirm="showDeleteConfirm"
		@handlerSearch="handlerSearch"
	>
		<div slot="imgUrl" slot-scope="{ text, record }" style="width: 80px; height: 80px">
			<img :src="fileUrl + text.split(';')[0]" style="width: 80px" />
		</div>
		<span slot="filterProdType" slot-scope="{ text, record }">{{ filterProdType(text) }}</span>
		<span slot="operation" slot-scope="{ text, record }" class="operation">
			<a href="javascript:;" v-has="'sys:deviceType:update'" title="编辑" class="edit" @click="editRecord(record)"
				>编辑</a
			>
			<a
				href="javascript:;"
				v-has="'sys:deviceType:delete'"
				title="删除"
				class="del"
				@click="showDeleteConfirm(1, record.deviceTypeId, record.deviceTypeName)"
				>删除</a
			>
		</span>
		<!-- 添加，编辑 -->
		<add-or-edit-device-type-modal
			:api="api"
			editKey="deviceTypeId"
			modalTitle="产品"
			ref="addOrEditModal"
			@ok="handlerRefresh"
		></add-or-edit-device-type-modal>
	</pro-table>
</template>

<script>
import { rowSelection, recordOperation } from '@/mixins';
import { deviceManageapi } from '@/api/index.js';
import addOrEditDeviceTypeModal from './module/addOrEditDeviceTypeModal';
const columns = [
	{
		title: '产品类型',
		dataIndex: 'prodTypeId',
		key: 'prodTypeId',
		ellipsis: true,
		searchInfo: {
			value: 'prodTypeId',
			type: 'select',
			defaultValue: undefined,
			optionlist: [],
		},
		scopedSlots: {
			customRender: 'filterProdType',
		},
	},
	{
		title: '产品名称',
		dataIndex: 'deviceTypeName', // data数据源中对应的字段
		key: 'deviceTypeName', // 列的关键字 如果有 dataIndex 则不需要key
		ellipsis: true,
		searchInfo: {
			type: 'string',
			defaultValue: '',
			value: 'deviceTypeName',
			text: '产品名称',
		},
	},
	{
		title: '产品编号',
		dataIndex: 'deviceTypeCode', // data数据源中对应的字段
		key: 'deviceTypeCode', // 列的关键字 如果有 dataIndex 则不需要key
		ellipsis: true,
	},
	{
		title: '产品图片',
		dataIndex: 'imgUrl',
		key: 'imgUrl',
		ellipsis: true,
		scopedSlots: {
			customRender: 'imgUrl',
		},
	},

	{
		title: '操作',
		key: 'operation',
		scopedSlots: {
			customRender: 'operation',
		},
		width: 160,
		fixed: 'right',
	},
];
export default {
	name: 'devicelist',
	mixins: [rowSelection, recordOperation],
	components: {
		addOrEditDeviceTypeModal,
	},
	data() {
		return {
			columns: columns,
			api: deviceManageapi.deviceTypeUrl,
			spinning: false,
			proTypeList: [],
			fileUrl: process.env.VUE_APP_FILE_API,
		};
	},
	created() {
		this.getProTypeListList();
	},
	methods: {
		handlerSearch(obj) {
			this.$refs.protable.loadTable(obj);
		},
		getProTypeListList(keys) {
			var param = keys;
			this.$postAction(deviceManageapi.prodTypeUrl.getList, {}).then((res) => {
				if (res.code == 1 && res.data.length > 0) {
					this.proTypeList = res.data;
					let proTypeListEnum = res.data.map((item) => {
						return {
							text: item.prodTypeName,
							value: item.prodTypeId,
						};
					});
					let newcolumns = [...this.columns];
					newcolumns = this.setColumnsSearchInfo(newcolumns, 'prodTypeId', proTypeListEnum, 'optionlist');
					newcolumns = this.setColumnsSearchInfo(newcolumns, 'prodTypeId', undefined, 'defaultValue');
					this.columns = [...newcolumns];
				}
			});
		},
		filterProdType(prodTypeId) {
			let info = this.proTypeList.find((item) => item.prodTypeId == prodTypeId);
			return info ? info.prodTypeName : '';
		},
	},
};
</script>

<style scoped="scoped" lang="less">
/deep/.deviceCount {
	position: relative;

	.devcount-item {
		padding: 10px 20px 0;
		text-align: center;
		//cursor: pointer;

		p {
			margin: 0;
		}

		.name {
			.ant-badge-status-text {
			}

			h2 {
				margin: 0;
			}
		}

		.num {
			font-size: 26px;
		}
	}

	.devcount-item.active {
		color: #108ee9;

		.name {
			.ant-badge-status-text {
				color: #108ee9;
			}
		}
	}

	.refresh {
		position: absolute;
		font-size: 24px;
		color: #000;
		top: 50%;
		right: 25px;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		cursor: pointer;
	}
}
</style>
